<template>
  <div style="padding: 20px">
    <div @click="goBack" style="text-align: left; margin-bottom: 40px">
      <van-icon name="arrow-left" />
    </div>
<!--    这段代码是一个Vue.js模板，其中包含了一个`div`元素和一个`van-icon`组件。-->

<!--    `div`元素使用了`@click`事件绑定，当用户点击该元素时，会触发名为`goBack`的方法。同时，该元素的样式设置为左对齐，并且底部外边距为40像素。-->

<!--    `van-icon`组件用于显示一个图标，它的`name`属性被设置为"arrow-left"，表示显示一个向左的箭头图标。-->

<!--    综上所述，这段代码的作用是创建一个带有向左箭头图标的可点击元素，当用户点击该元素时，会触发名为`goBack`的方法。-->

    <div style="text-align: center; margin-bottom: 40px">
      <img :src="currentProduct.obj.img" />
    </div>

    <div style="padding: 20px">
      <div
          style="
          margin-bottom: 40px;
          display: flex;
          justify-content: space-between;
        "
      >
        <span>
          {{ currentProduct.obj.name }}
        </span>

        <span @click.stop="collect()">
          <van-icon
              :name="currentProduct.obj.isCollect ? 'like' : 'like-o'"
              :color="currentProduct.obj.isCollect ? 'red' : ''"
          />
        </span>

<!--        这段代码是一个Vue.js模板，其中包含了两个`span`元素和一个`van-icon`组件。-->

<!--        第一个`span`元素用于显示当前产品的名称，它的文本内容为`{{ currentProduct.obj.name }}`，这是一个插值表达式，表示显示名为`currentProduct`的对象中的`obj.name`属性的值。-->

<!--        第二个`span`元素用于显示一个收藏图标，它使用了`@click.stop`事件修饰符，表示阻止事件冒泡，即点击该元素时不会触发父元素的点击事件。同时，该元素还绑定了一个名为`collect()`的方法。-->

<!--        `van-icon`组件用于显示一个图标，它的`name`属性根据当前产品的收藏状态动态设置，如果已收藏则显示"like"图标，否则显示"like-o"图标。同时，它的`color`属性也根据收藏状态动态设置，如果已收藏则颜色为红色，否则为默认颜色。-->

<!--        综上所述，这段代码的作用是显示当前产品的名称和收藏图标，当用户点击收藏图标时，会触发名为`collect()`的方法。-->
      </div>

      <div
          style="
          display: flex;
          margin-bottom: 40px;
          justify-content: space-between;
        "
      >
        <div>
          <span
              style="
              padding: 5px 14px;
              border-radius: 10px;
              border: 1px solid #53b175;
              font-size: 16px;
              margin-right: 5px;
            "
              @click="reduceNum()"
          >-</span
          >

          <input
              style="
              width: 20px;
              padding: 5px 14px;
              border-radius: 10px;
              border: none;
              outline: none;
              font-size: 16px;
            "
              type="text"
              inputmode="decimal"
              v-model="currentProduct.obj.num"
          />
<!--          这段代码是一个Vue.js模板，其中包含了一个`input`元素。-->

<!--          该`input`元素的样式设置为宽度为20像素、内边距为5像素和14像素、边框圆角为10像素、
无边框、无轮廓线、字体大小为16像素。-->

<!--          它的类型被设置为"text"，输入模式被设置为"decimal"，表示只能输入十进制数字。-->

<!--          同时，它使用了`v-model`指令将名为`currentProduct.obj.num`的数据属性与该输入框进行双向绑定，即当用户在输入框中输入内容时，会自动更新`currentProduct.obj.num`的值，反之亦然。-->

<!--          综上所述，这段代码的作用是创建一个用于输入数量的文本框，并将其与名为-->
<!--          `currentProduct.obj.num`的数据属性进行双向绑定。-->
          <span
              @click="addNum()"
              style="
              padding: 5px 14px;
              border-radius: 10px;
              background: #53b175;
              color: #fff;
              font-size: 16px;
            "
          >+</span
          >
        </div>
        <div>
          <span
          >{{ currentProduct.obj.totalPrice
            }}{{ currentProduct.obj.unit }}</span
          >

<!--          这段代码是一个Vue.js模板，其中包含了一个`div`元素和一个`span`元素。-->

<!--          `div`元素用于包裹`span`元素，没有其他属性和样式设置。-->

<!--          `span`元素的文本内容为`{{ currentProduct.obj.totalPrice }}{{ currentProduct.obj.unit }}`，这是一个插值表达式，表示显示名为`currentProduct`的对象中的`obj.totalPrice`属性的值和`obj.unit`属性的值。-->

<!--          综上所述，这段代码的作用是显示当前产品的总价和单位。-->
        </div>
      </div>
    </div>

    <van-collapse v-model="activeNames" style="margin-bottom: 120px">
      <van-collapse-item title="产品详情" name="1">
        {{ currentProduct.obj.details }}
      </van-collapse-item>
      <van-collapse-item title="产地" name="2">
        {{ currentProduct.obj.location }}
      </van-collapse-item>
      <van-collapse-item title="评分" name="3">
        <van-rate v-model="currentProduct.obj.star" allow-half />
      </van-collapse-item>
    </van-collapse>

<!--    这段代码是一个Vue.js模板，其中包含了一个`van-collapse`组件和三个`van-collapse-item`组件。-->

<!--    `van-collapse`组件用于创建一个折叠面板，它的`v-model`属性绑定了一个名为`activeNames`的数据属性，表示当前展开的面板的名称。同时，该组件的样式设置为底部外边距为120像素。-->

<!--    第一个`van-collapse-item`组件的标题为"产品详情"，名称为"1"，它的文本内容为`{{ currentProduct.obj.details }}`，这是一个插值表达式，表示显示名为`currentProduct`的对象中的`obj.details`属性的值。-->

<!--    第二个`van-collapse-item`组件的标题为"产地"，名称为"2"，它的文本内容为`{{ currentProduct.obj.location }}`，这是一个插值表达式，表示显示名为`currentProduct`的对象中的`obj.location`属性的值。-->

<!--    第三个`van-collapse-item`组件的标题为"评分"，名称为"3"，它包含了一个`van-rate`组件，用于显示评分。`van-rate`组件的`v-model`属性绑定了名为`currentProduct.obj.star`的数据属性，表示当前评分的值。同时，该组件的`allow-half`属性被设置为true，表示允许半颗星的评分。-->

<!--    综上所述，这段代码的作用是创建一个包含三个折叠面板的折叠面板组，分别显示产品的详情、产地和评分信息。-->

    <div class="my-button">
      <div style="padding: 10px 20px" @click="addCart">
        <span> 添加到购物车</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "./../mixin.js";
const { errorMsgBox, successMsgBox } = myMixin();
const useUserStore = userStore();
// 这段代码是使用Vue.js和Pinia库编写的。它导入了一些必要的模块和函数，并定义了一些变量和函数。
//
// 首先，它从"vue"模块中导入了`ref`、`reactive`和`onMounted`函数。这些函数用于创建响应式的数据对象和生命周期钩子。
//
// 然后，它从"vue-router"模块中导入了`useRouter`函数。这个函数用于获取当前路由实例，以便在组件中使用路由功能。
//
// 接下来，它从"vant"库中导入了`showDialog`函数。这个函数用于显示对话框。
//
// 然后，它从"../store/piniaStore"模块中导入了`userStore`对象。这个对象是一个Pinia存储，用于管理用户相关的数据状态。
//
// 接着，它从"./../mixin.js"模块中导入了`myMixin`对象。这个对象是一个混合（mixin），包含了一些自定义的方法和属性。
//
// 然后，它从`myMixin`对象中解构出了`errorMsgBox`和`successMsgBox`两个方法。这两个方法分别用于显示错误消息框和成功消息框。
//
// 最后，它调用了`userStore()`函数来创建一个Pinia存储的实例，并将其赋值给`useUserStore`变量。
//
// 这段代码的目的是初始化一些变量和函数，以便在后续的代码中使用它们。

let cartList = useUserStore.cartList;
let products = useUserStore.products;

const router = useRouter();

let collectList = useUserStore.collectList;

let activeNames = ref(["1"]);

let currentProduct = reactive({ obj: {} });

// 1. `let cartList = useUserStore.cartList;`：
// 这行代码从名为`useUserStore`的状态管理对象中获取购物车列表（`cartList`）。
//
// 2. `let products = useUserStore.products;`：
// 这行代码从`useUserStore`中获取产品列表（`products`）。
//
// 3. `const router = useRouter();`：
// 这行代码导入了Vue Router，一个官方的路由管理器。它允许我们在应用程序中进行页面导航。
//
// 4. `let collectList = useUserStore.collectList;`：
// 这行代码从`useUserStore`中获取收藏列表（`collectList`）。
//
// 5. `let activeNames = ref(["1"]);`：
// 这行代码创建了一个响应式的引用（`ref`），并将其初始化为包含字符串"1"的数组
// 。这个引用可能用于控制某个组件或元素的激活状态。
//
// 6. `let currentProduct = reactive({ obj: {} });`：
// 这行代码创建了一个响应式的对象（`reactive`），并将其初始化为一个包含空对象的`obj`属性。



onMounted(() => {
  currentProduct.obj =
      products[window.localStorage.getItem("currentProductIndex")];
});
// 这段代码是Vue.js框架中的一个生命周期钩子函数`onMounted`，它表示在组件挂载到DOM后执行的回调函数。
//
// 具体来说，当组件被挂载到DOM时，会执行`onMounted`中的回调函数。
// 在这个例子中，回调函数的作用是从`localStorage`中获取名为"currentProductIndex"的值，然后使用这个值作为索引从`products`数组中获取对应的元素，
// 并将其赋值给`currentProduct.obj`。这样，`currentProduct.obj`就被初始化为当前选中的产品对象。
function addNum() {
  currentProduct.obj.num += 1;
  currentProduct.obj.totalPrice =
      currentProduct.obj.num * currentProduct.obj.price;
}
function reduceNum() {
  if (currentProduct.obj.num > 0) {
    currentProduct.obj.num -= 1;
    currentProduct.obj.totalPrice =
        currentProduct.obj.num * currentProduct.obj.price;
  }
}
function goBack() {
  router.push(window.localStorage.getItem("lastPage"));
}

// 这段代码是JavaScript语言编写的，主要包含三个函数：addNum()、reduceNum()和goBack()。
//
// 1. addNum()函数：该函数的作用是将currentProduct对象的num属性值加1，然后重新计算totalPrice属性的值，即num乘以price。
//
// 2. reduceNum()函数：该函数的作用是将currentProduct对象的num属性值减1，如果num大于0，则重新计算totalPrice属性的值，即num乘以price。
//
// 3. goBack()函数：该函数的作用是跳转到上一个页面，
// 具体实现是通过获取localStorage中的lastPage属性值，然后使用router.push()方法进行页面跳转。

function collect() {
  if (currentProduct.obj.isCollect) {
    let index1;
    let isExist = collectList.some((collectProduct, index) => {
      index1 = index;
      return collectProduct.id == currentProduct.obj.id;
    });
    if (isExist) {
      collectList.splice(index1, 1);
    }
    currentProduct.obj.isCollect = false;
    successMsgBox("取消成功");
  } else {
    let isExist = collectList.some((collectProduct) => {
      return collectProduct.id == currentProduct.obj.id;
    });
    if (!isExist) {
      collectList.push(currentProduct.obj);
    }
    currentProduct.obj.isCollect = true;
    successMsgBox("收藏成功");
  }
}
// 这段代码是一个名为collect()的函数，用于处理收藏和取消收藏的逻辑。
//
// 当currentProduct.obj.isCollect为true时，表示当前商品已经被收藏，此时需要取消收藏。首先通过some方法遍历collectList数组，找到与当前商品id相同的商品，如果找到了，
// 则将其从collectList中删除，并将currentProduct.obj.isCollect设置为false，同时弹出一个提示框显示"取消成功"。
//
// 当currentProduct.obj.isCollect为false时，表示当前商品未被收藏，此时需要收藏该商品。
// 首先通过some方法遍历collectList数组，判断是否已经存在与当前商品id相同的商品，如果不存在，
// 则将currentProduct.obj添加到collectList中，并将currentProduct.obj.isCollect设置为true，
// 同时弹出一个提示框显示"收藏成功"。

function addCart() {
  let isExist = cartList.some((cartProduct) => {
    if (cartProduct.id == currentProduct.obj.id) {
      cartProduct.num += currentProduct.obj.num;
      cartProduct.totalPrice = cartProduct.num * cartProduct.price;
      return true;
    }
  });
  if (!isExist) {
    cartList.push(currentProduct.obj);
  }
  useUserStore.calcluteCart();
  successMsgBox("添加成功");
}


// 这段代码是一个名为addCart()的函数，用于将当前商品添加到购物车中。
//
// 首先，通过some方法遍历购物车列表cartList，判断是否已经存在与当前商品id相同的商品。
// 如果存在，则将该商品的num属性值加上当前商品的num属性值，并重新计算该商品的总价totalPrice。然后返回true表示找到了相同id的商品。
//
// 如果不存在相同id的商品，则将当前商品对象currentProduct.obj添加到购物车列表cartList中。
//
// 最后，调用useUserStore.calcluteCart()方法重新计算购物车中商品的总价和数量，弹出一个提示框显示"添加成功"。
</script>